<template>
    <f7-actions ref="myAction">
        <f7-actions-group>
            <template v-for=" item,index in data">
                <f7-actions-label  :class="{'active':item.switch}"  @click="clickAction(item,index)">{{item.val}}</f7-actions-label>
            </template>
        </f7-actions-group>
        <f7-actions-group>
            <f7-actions-button color="red" bold>取消</f7-actions-button>
        </f7-actions-group>
    </f7-actions>
</template>

<script>
    import common from '../utils/common.js'
    export default {
        name: "actionSheet",
        props:{
            data:{
              default:function () {
                  return [
                      {key:'one',val:'一',switch:true},
                      {key:'two',val:'二',switch:false}
                  ];
              }
            }
        },
        data(){return{
            result:{}
        }},
        methods:{
            openAction(){
                this.$refs.myAction.open()
            },
            closeAction(){
                this.$refs.myAction.close()
            },
            clickAction(item,index){
                common.addAttrSwitch(this.data)
                item.switch=true;
                this.$set(this.data,index,item)
                this.$emit('actionEmit', item);
                this.closeAction()
            }
        }
    }
</script>

<style scoped>
    .active{
        color:#6E6EE9!important;
    }
</style>
